<template>
  <div>
    <el-form class="query-table-form" :inline="true">
      <el-form-item>
        <el-input v-model="params.customer_name" placeholder="项目名称查询" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <c-select
          clearable
          :options="enumRiskType"
          v-model="params['risk_type.eq']"
          placeholder="风险类型"
          @change="getData()"
        ></c-select>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" @click="getData()">查询</el-button>
      </el-form-item>
    </el-form>

    <c-table border v-loading="loading" :columns="tableColumns" :data="tableData">
      <template v-slot:risk="scope">
        <div>{{ scope.row.riskType }}</div>
        <div v-if="+(scope.row.risk_type || '') === 3">{{ scope.row.risk_type_remark }}</div>
      </template>
    </c-table>
    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <view-dialog :visible.sync="viewVisible" :query-id="viewId"></view-dialog>
    <edit-dialog
      :visible.sync="editVisible"
      :form-data="formData"
      @success="getData()"
    ></edit-dialog>

    <list-dialog
      :visible.sync="listVisible"
      :table-id="registerId"
      :query-id="queryId"
    ></list-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { enumRiskType } from '@/bigcredit/views/settle/risk/enum'
import ViewDialog from '@/bigcredit/views/settle/risk/ViewDialog'
import EditDialog from '@/bigcredit/views/settle/risk/components/EditDialog'
import ListDialog from '@/bigcredit/views/settle/risk/components/refunds/ListDialog'
export default {
  components: {
    ViewDialog,
    EditDialog,
    ListDialog,
  },
  props: {},
  data() {
    return {
      enumRiskType,
      loading: false,
      params: {
        index: 1,
        size: 15,
      },
      order: {
        create_time: 'desc',
      },
      totalCount: 0,
      tableData: [],
      tableName: 'risk_funds_view',
      tableColumns: [
        { attrs: { label: '客户名称', prop: 'customer_name', minWidth: 120 } },
        { attrs: { label: '风险类型', prop: 'riskType', align: 'center' }, slot: 'risk' },
        { attrs: { label: '缴纳比例(%)', prop: 'pay_rate', align: 'center' } },
        { attrs: { label: '应缴金额(万元)', prop: 'pay_funds', align: 'center' } },
        { attrs: { label: '实缴金额(万元)', prop: 'pay_funds_actual', align: 'center' } },
        { attrs: { label: '退费金额(万元)', prop: 'back_funds', align: 'center' } },
        { attrs: { label: '备注', prop: 'remark', align: 'center', minWidth: 120 } },
        {
          attrs: { label: '操作', align: 'center', width: 100 },
          operations: [
            {
              content: '修改',
              icon: 'fa fa-edit',
              event: this.handleEdit,
              ifRender: row => +(row.back_funds || '') === 0,
            },
            {
              content: '退费',
              icon: 'fa fa-cny',
              event: this.handleReFunds,
            },
            { content: '查看', icon: 'fa fa-search', event: this.handleView },
          ],
        },
      ],

      viewVisible: false,
      viewId: '',

      formData: {},
      editVisible: false,

      listVisible: false,
      registerId: '',
      queryId: '',
    }
  },
  computed: {
    ...mapGetters(['clientId']),
  },
  watch: {},
  created() {
    this.params['service_id.eq'] = this.clientId
    this.getData()
  },
  mounted() {},
  methods: {
    handleReFunds(row) {
      this.listVisible = true
      this.registerId = row?.id ?? ''
      this.queryId = row?.customer_related_id ?? ''
    },
    handleEdit(row) {
      this.editVisible = true
      this.formData = { ...row }
    },
    handleView(row) {
      this.viewId = row.customer_related_id || ''
      this.viewVisible = true
    },
    dataAdapter(item) {
      item.riskType = enumRiskType[item.risk_type]
      return item
    },
    getData() {
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.tableName, this.params, this.order)
        .then(res => {
          const data = res.data || {}
          this.tableCount = data.totalCount || 0
          this.tableData = (data.data || []).map(this.dataAdapter)
        })
        .finally(() => {
          this.loading = false
        })
    },
  },
}
</script>

<style lang="scss" scoped></style>
